import Top from "../home/component/top";
import React, {useEffect, useState} from "react";
import MyFooter from "../home/component/myFooter";
import {DatePicker, Input, Layout} from "antd";
import axios from "axios";

const {  Content } = Layout;
const Person  = () => {
    const [imgPath,setImgPath] = useState("./profile/" + sessionStorage.getItem('idpicpath'));
    const [user,setUser] = useState({});

    const getSelf =  async () => {
        try {
            const response = await axios.get(`http://localhost:8084/user/${sessionStorage.getItem('id')}`, {})
            setUser(response.data.data)
        } catch (error) {
            console.error(error);
        }
    }
    useEffect(()=>{
        getSelf();
    },[])

return(
    <>
        <Layout className="layout">
            <Top></Top>
            <Content style={{ padding: '0 100px' , marginTop : '20px'}}>
        <div className="layui-col-md4 layui-col-md-offset4">

            <fieldset className="layui-elem-field layui-field-title" style={{marginTop: '50px'}}>
                <legend>个人信息</legend>
            </fieldset>

            <form className="layui-form" action="${pageContext.request.contextPath}/user/update1" method="post"
                  lay-filter="example" encType="multipart/form-data">


                <div className="layui-col-md-8 layui-col-md-offset-2">

                </div>
                <div className="layui-form-item">
                    <div className="layui-col-md-12">
                        <label className="layui-form-label">头像</label>
                    </div>
                    <div className="layui-col-lg-offset3">
                        <div className="layui-upload-list">
                            <img className="layui-upload-img" id="demo1" style={{
                                width: "100px"}}
                                 src={imgPath} />
                                <p id="demoText"></p>
                        </div>
                    </div>
                </div>
                <div className="layui-form-item">
                    <label className="layui-form-label">手机号</label>
                    <div className="layui-input-inline">
                        <input type="text" name="phone" id="phone" lay-verify="title" autoComplete="off"
                               placeholder="请输入手机号" className="layui-input" value={user.phone}
                               />
                    </div>
                </div>
                <div className="layui-form-item">
                    <label className="layui-form-label">地址</label>
                    <div className="layui-input-inline">
                        <input type="text" name="phone" id="phone" lay-verify="title" autoComplete="off"
                               placeholder="请输入手机号" className="layui-input" value={user.address}
                        />
                    </div>
                </div>


                <div className="layui-form-item">
                    <label className="layui-form-label">性别</label>
                    <div className="layui-input-inline">
                        <input
                            type="text"
                            name="sex"
                            lay-verify="title"
                            autoComplete="off"
                            className="layui-input"
                            value={user.gender == 0 ? '男' :  '女' }
                        />
                    </div>
                </div>


                <hr/>

                    <div className="layui-form-item">
                        <div className="layui-input-block">
                            <button type="submit" className="layui-btn" lay-submit="" lay-filter="demo1">修改个人信息
                            </button>
                        </div>
                    </div>

            </form>
        </div>
            </Content>
            <MyFooter></MyFooter>
        </Layout>
    </>

)
}
export default Person;